<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body,
		div,
		ul,
		li {
			margin: 0;
			padding: 0;
		}

		ul {
			list-style-type: none;
		}

		body {
			/* background: #000; */
			text-align: center;
			font: 12px/20px Arial;
		}

		#box {
			position: relative;
			width: 492px;
			height: 172px;
			background: #fff;
			border-radius: 8px;
			margin: 10px auto;
		}

		#box .list {
			position: relative;
			width: 490px;
			height: 170px;
			overflow: hidden;
			border: 1px solid #ccc;
		}

		/* 此处有层意义，首先通过position相对--绝对定位，将li层都叠加在一起；
			然后，将每层的透明度效果全部初始化为透明，即：为0；
			这样，额也是为了后续js淡入淡出效果提供一个原始环境，在切换的时候，当前效果不会受到其他效果的影响；
		 */
		#box .list li {
			position: absolute;
			top: 0;
			left: 0;
			width: 490px;
			height: 190px;
			opacity: 0;
			filter: alpha(opacity=0);
		}

		#box .list li.current {
			opacity: 1;
			filter: alpha(opacity=100);
		}

		#box .count {
			position: absolute;
			right: 0;
			bottom: 5px;
			overflow: hidden;
		}

		#box .count li {
			color: #fff;
			float: left;
			width: 20px;
			height: 20px;
			cursor: pointer;
			margin-right: 5px;
			background: #f90;
			opacity: 0.7;
			filter: alpha(opacity=70);
			border-radius: 20px;
		}

		#box .count li.current {
			color: #fff;
			opacity: 1;
			filter: alpha(opacity=100);
			font-weight: 700;
			background: #f60;
		}
	</style>
	<script>
		window.onload = function () {
			var oBox = document.getElementById("box");
			var aUl = document.getElementsByTagName("ul");
			var aImg = aUl[0].getElementsByTagName("li");
			var aNum = aUl[1].getElementsByTagName("li");
			var timer = play = null;
			var i = index = 0;
			//切换按钮
			for (i = 0; i < aNum.length; i++) {
				aNum[i].index = i;
				aNum[i].onmouseover = function () {
					show(this.index);
				}
			}

			//鼠标滑过关闭自动播放
			oBox.onmouseover = function () {
				clearInterval(play)
			};
			//鼠标离开启动自动播放
			oBox.onmouseout = function () {
				autoPlay()
			};

			autoPlay();
			//自动播放效果
			function autoPlay() {
				play = setInterval(function () {
					index++;
					index >= aImg.length && (index = 0);
					show(index)
				}, 2000)
			}

			//图片切换，淡入淡出效果
			function show(a) {
				index = a;
				var alpha = 0;
				for (var x in aNum) aNum[x].className = "";
				aNum[index].className = "current";
				clearInterval(timer);

				//此处为初始化页面效果.当且仅当前页面透明度变化，其他页面透明度保证为0
				for (i = 0; i < aImg.length; i++) {
					aImg[i].style.opacity = 0;
					aImg[i].style.filter = "alpha(opacity=0)";
				}
				//实现淡入淡出效果
				timer = setInterval(function () {
					alpha += 2;
					alpha > 100 && (alpha = 100);
					aImg[index].style.opacity = alpha / 100;
					aImg[index].style.filter = "alpha(opacity=alpha)";
					alpha == 100 && clearInterval(timer);
				}, 50);
			}
		}
	</script>
</head>

<body>
	<div id="box">
		<ul class="list">
			<li class="current"><img src="/小丸子.gif" alt="111" width="490" height="190"></li>
			<li><img src="./1.JPG" alt="222" width="490" height="190"></li>
			<li><img src="./2.JPG" alt="333" width="490" height="190"></li>
			<li><img src="./3.JPG" alt="444" width="490" height="190"></li>
			<li><img src="./王也.png" alt="555" width="490" height="190"></li>
		</ul>
		<ul class="count">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>

</html>